<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在 windon全局 多一个 template 函数 template('模板的ID', 需要渲染的数据对象)-->
    <script src="./JS/template.js"></script>
    <script src="./JS/jQuery.min.js"></script>
</head>

<body>
    <!-- 
    导入
    定义数据 
    定义模板
    调用template函数
    渲染HTML结构
-->
    <div class="container"></div>

    <!-- 定义模板 -->
    <script type="text/html" id="tpl_user">
    <!--  {{}} 占位 -->
    <h1>{{hobby}}</h1>
    {{title}}
    {{@ title}}
    </script>

    <script>
        // 定义需要渲染的数据
        let data = {
            title: '<h1>用户信息</h1>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']
        }
        // 调用
        const htmlStr = template('tpl_user', data)
        console.log(htmlStr);
        // 渲染到页面
        $('.container').html(htmlStr)
    </script>


</body>

</html>